'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

interface DeviceStatusCardProps {
  icon: React.ReactNode
  title: string
  value: string
  status: 'normal' | 'warning' | 'error'
  description: string
}

const DeviceStatusCard: React.FC<DeviceStatusCardProps> = ({ icon, title, value, status, description }) => (
  <div className="rounded-lg border bg-card p-4 shadow-sm">
    <div className="flex items-center gap-3">
      {icon}
      <div>
        <h4 className="text-sm font-medium">{title}</h4>
        <p className="text-lg font-semibold">{value}</p>
      </div>
    </div>
    <p className="mt-2 text-sm text-muted-foreground">{description}</p>
    <div className="mt-3 h-1 rounded-full bg-muted">
      <div
        className={cn(
          "h-full rounded-full transition-width",
          status === 'normal' ? 'bg-green-500' : status === 'warning' ? 'bg-amber-500' : 'bg-red-500'
        )}
        style={{ width: '75%' }}
      />
    </div>
  </div>
)

export default DeviceStatusCard